<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的布局</title>
<!-- <script type="text/javascript" src="./scripts/jquery-1.8.1.js"></script> -->
<script type="text/javascript" src="./scripts/jquery-1.9.0.js"></script>
<script type="text/javascript" src="./scripts/jquery-migrate-1.0.0.js"></script>

<script type="text/javascript" src="./scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jquery-ui/css/ui-lightness/jquery-ui-1.10.0.custom.css" />

<script type="text/javascript" src="./scripts/jquery.layout-latest.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/layout-default-latest.css" />
<script type="text/javascript" src="./scripts/debug.js"></script>

<!-- <script type="text/javascript" src="./scripts/jqGrid/js/jquery.jqGrid.min.js"></script> -->
<script type="text/javascript" src="./scripts/jqGrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="./scripts/jqGrid/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jqGrid/css/ui.jqgrid.css" />

<script type="text/javascript" src="./scripts/jquery-resize/jquery.ba-resize.js"></script>



<STYLE type="text/css">
	/* Using an 'optional-container' instead of 'body', so need body to have a 'height' */
	html, body {
		width:		100%;
		height:		100%;
		padding:	0;
		margin:		0;
		overflow:	hidden !important;
	}
	#optional-container {
		 width:			100%;
		height:			100%;
		/*margin-top:		2%;
		margin-left:	2%; */
	}
	.ui-layout-center { overflow: hidden; }
	.searchBar {
	width: 100%;
	height: auto;
	min-height:100px;
	/*  margin: 10px auto; */
	padding: 5px;
	border: 1px solid #777;
	background-color: #fbca93;
	text-align: center;
	position: relative;
	left: 0;
	margin: 0px;
	padding: 0px;
	display: none;
}
	</STYLE>
<SCRIPT type="text/javascript">
	var myLayout,grid;
function toggleSearchBar(){
	var options;
    if ( $( "#toggleButton" ).text() === "open" ) {
    	//alert( $( this ).text());
      options = {
        label: "close",
        icons: {
          primary: "ui-icon-pause"
        }
      };
   // $(".searchBar").toggle();
    } else {
    	//alert( $( this ).text());
      options = {
        label: "open",
        icons: {
          primary: "ui-icon-play"
        }
      };
    }
    $( "#toggleButton" ).button( "option", options );
	$(".searchBar").toggle();
	myLayout.resizeAll();
}
	function resizeGrid(tgrid) {
		var container = tgrid.parents('.grid_container:first');
		var cw = container.width();
		var ch = container.height();
        var ph = container.find(".ui-jqgrid-pager").height();
		var th = container.find(".ui-jqgrid-titlebar").height();
		var hh = container.find(".ui-jqgrid-hdiv").height();
		if (th > 5)
			th = th + 8
		tgrid.jqGrid('setGridWidth', cw - 2, 'true');
		tgrid.jqGrid('setGridHeight', ch - ph - th - hh, 'true'); 
	}
	$(document).ready(
			function() {

				//$("#tabs_div").tabs();

				$(".header-footer").hover(function() {
					$(this).addClass('ui-state-hover');
				}, function() {
					$(this).removeClass('ui-state-hover');
				});

				myLayout = $('#optional-container').layout({
					center : {
						closable : false,
						resizable : false,
						slidable : false,
					// onresize: resizeGrid,
					// triggerEventsOnLoad: true  // resize the grin on load also
					//onsizecontent_end:resizeGrid
					}
				});

				var mydata = [ {
					id : "1",
					invdate : "2007-10-01",
					name : "test",
					note : "note",
					amount : "200.00",
					tax : "10.00",
					closed : true,
					ship_via : "TN",
					total : "210.00"
				}, {
					id : "2",
					invdate : "2007-10-02",
					name : "test2",
					note : "note2",
					amount : "300.00",
					tax : "20.00",
					closed : false,
					ship_via : "FE",
					total : "320.00"
				}, {
					id : "3",
					invdate : "2007-09-01",
					name : "test3",
					note : "note3",
					amount : "400.00",
					tax : "30.00",
					closed : false,
					ship_via : "FE",
					total : "430.00"
				}, {
					id : "4",
					invdate : "2007-10-04",
					name : "test4",
					note : "note4",
					amount : "200.00",
					tax : "10.00",
					closed : true,
					ship_via : "TN",
					total : "210.00"
				}, {
					id : "5",
					invdate : "2007-10-31",
					name : "test5",
					note : "note5",
					amount : "300.00",
					tax : "20.00",
					closed : false,
					ship_via : "FE",
					total : "320.00"
				}, {
					id : "6",
					invdate : "2007-09-06",
					name : "test6",
					note : "note6",
					amount : "400.00",
					tax : "30.00",
					closed : false,
					ship_via : "FE",
					total : "430.00"
				}, {
					id : "7",
					invdate : "2007-10-04",
					name : "test7",
					note : "note7",
					amount : "200.00",
					tax : "10.00",
					closed : true,
					ship_via : "TN",
					total : "210.00"
				}, {
					id : "8",
					invdate : "2007-10-03",
					name : "test8",
					note : "note8",
					amount : "300.00",
					tax : "20.00",
					closed : false,
					ship_via : "FE",
					total : "320.00"
				}, {
					id : "9",
					invdate : "2007-09-01",
					name : "test9",
					note : "note9",
					amount : "400.00",
					tax : "30.00",
					closed : false,
					ship_via : "TN",
					total : "430.00"
				}, {
					id : "10",
					invdate : "2007-09-08",
					name : "test10",
					note : "note10",
					amount : "500.00",
					tax : "30.00",
					closed : true,
					ship_via : "TN",
					total : "530.00"
				}, {
					id : "11",
					invdate : "2007-09-08",
					name : "test11",
					note : "note11",
					amount : "500.00",
					tax : "30.00",
					closed : false,
					ship_via : "FE",
					total : "530.00"
				}, {
					id : "12",
					invdate : "2007-09-10",
					name : "test12",
					note : "note12",
					amount : "500.00",
					tax : "30.00",
					closed : false,
					ship_via : "FE",
					total : "530.00"
				} ], grid = $("#list"), lastSel = -1, editingRowId = -1;

				grid.jqGrid({
					datatype : 'local',
					data : mydata,
					colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
							'Total', 'Closed', 'Shipped via', 'Notes' ],
					colModel : [ {
						name : 'id',
						index : 'id',
						width : 70,
						align : 'center',
						sorttype : 'int',
						hidden : false
					}, {
						name : 'invdate',
						index : 'invdate',
						width : 80,
						align : 'center'
					}, {
						name : 'name',
						index : 'name',
						width : 70,
						editable : true
					}, {
						name : 'amount',
						index : 'amount',
						width : 70,

						/* 	formatter: numberFormat,
						    formatoptions: {definedFormat:"#,##0.00"}, */

						align : 'right',
						editrules : {
							required : true,
							number : true
						},
						editable : true
					}, {
						name : 'tax',
						index : 'tax',
						width : 50,
						formatter : 'number',
						align : 'right',
						editable : true,
						editrules : {
							required : true,
							number : true
						}
					}, {
						name : 'total',
						index : 'total',
						width : 60,
						formatter : 'number',
						align : 'right',
						editrules : {
							required : true,
							number : true
						},
						editable : true
					}, {
						name : 'closed',
						index : 'closed',
						width : 60,
						align : 'center',
						editable : true,
						formatter : 'checkbox',
						edittype : 'checkbox',
						editoptions : {
							value : 'Yes:No',
							defaultValue : 'Yes'
						}
					}, {
						name : 'ship_via',
						index : 'ship_via',
						width : 90,
						align : 'center',
						formatter : 'select',
						editable : true,
						editrules : {
							required : false
						},
						edittype : 'select',
						editoptions : {
							value : ' : ;FE:FedEx;TN:TNT;IN:Intim',
							defaultValue : 'Intime'
						}
					}, {
						name : 'note',
						index : 'note',
						width : 70,
						sortable : false,
						editable : true
					} ],
					rowNum : 10,
					rowList : [ 5, 10, 20 ],
					pager : '#pager',
					gridview : true,
					// rownumbers:true,
					sortname : 'id',
					viewrecords : true,
					sortorder : 'desc',
					//caption:'Just simple local grid',
					//height:300,
					autowidth : false,
					//editurl: 'clientArray',
					onSelectRow : function(rowid) {
						//alert("onSelectRow,rowid is: "+rowid);
						/*   if (rowid && rowid !== lastSel) {
						      grid.jqGrid('restoreRow',lastSel);
						      lastSel = rowid;
						  } */
					},
					ondblClickRow : function(rowid) {
						editingRowId = rowid;
						grid.jqGrid('editRow', rowid, true, null, null, null,
								{}, function() {
									setTimeout(function() {
										grid.focus();
									}, 100);
								});
						return;
					},
					gridComplete : function() {

					},
					loadComplete : function() {
						resizeGrid(jQuery(this));
					}

				});

				$("#grid-container").bind("resize", function() {
					resizeGrid($("#list"));
				});
				jQuery( "button" ).button();
			});
</SCRIPT>

</head>
<body>
	<DIV id="optional-container">
		<div id="tabs_div" class="ui-layout-center"  style="padding: 0;margin: 0;border: 0;overflow:hidden">
			<DIV class="searchBar ">
				<table>
				<thead><tr><th>adfas</th></tr>
				</thead>
				<tbody>
				<tr><td>ssss</td></tr>
				</tbody>
				<tfoot><tr><th>adfas</th></tr></tfoot>
				</table>
			</DIV>
			<DIV class="header-footer ui-state-default ui-corner-all" style="padding: 0;margin: 0;border: 0; text-align: center; overflow:hidden;">
				Header DIV above Tabs UL   <a href="#" onClick="showState(myLayout,'center')">    Show State.Center</a>&nbsp;<br>
				<button id="toggleButton" onclick="javascript:toggleSearchBar();">open</button>
				<!-- <a href="#" onclick="javascript:toggleSearchBar();">toggle SearchBar</a> -->
			</DIV>
			<DIV id="grid-container" class="ui-layout-content  grid_container" style="padding: 0;margin: 0;border: 0;overflow:hidden">
				<table id="list"  ></table>
				<div id="pager"></div>
			</DIV>
			<div class="footer  ui-state-default ui-corner-all">footer</div>
		</div>
		<div class="ui-layout-north">北面板</div>
		<!-- <div class="ui-layout-south">南面板</div> -->
		<!-- <div class="ui-layout-east">东面板</div> -->
		<div class="ui-layout-west">西面板</div>
	</DIV>
</body>

</html>